<template>
  <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
</div>
</template>
<script>
  import Scroll from 'better-scroll'
  import callChartBox from './call-chart-box.vue'
  export default {
    name: 'trans-loading',
    data () {
      return {}
    },
    props: {
     
    }
  }
</script>
<style lang='stylus' scoped>
.spinner
  text-align center
.spinner > div
  width 10px
  height 10px
  background-color #48a2e5
  border-radius 100%
  display inline-block
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out
  animation: bouncedelay 1.4s infinite ease-in-out
  -webkit-animation-fill-mode both
  animation-fill-mode both
 
.spinner .bounce1
  -webkit-animation-delay -0.32s
  animation-delay -0.32s

 
.spinner .bounce2
  -webkit-animation-delay -0.16s
  animation-delay -0.16s
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0)
    -webkit-transform: scale(0.0)
  } 40% {
    transform: scale(1.0)
    -webkit-transform: scale(1.0)
  }
}
</style>
